<script setup lang="tsx">
import { useRouter } from 'vue-router'
import { ref, unref } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import {
  delListApi,
  getListApi,
  exportFileApi,
  setAllowZeroStockSaleApi
} from '@/api/inventory/index'
import { useEventBus } from '@/hooks/event/useEventBus'
import { useI18n } from '@/hooks/web/useI18n'
import { CurdData } from '@/api/inventory/types'
import { ActionButtonsTemplate } from '@/api/global/types'
import useSchema from '@/views/Warehouse/Inventory/components/hooks/useSchema'
import { useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { Search } from '@/components/Search'
import { BaseButton } from '@/components/Button'
import { ContentWrap } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import Pagination from '@/components/Pagination/index.vue'
import { getEnumListApi, setSaleStatusApi, getSecondWarehouseListApi } from '@/api/warehouse/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import DialogImport from './components/DialogImport/index.vue'
import DialogAllot from './components/DialogAllot/index.vue'
import dayjs from 'dayjs'
import DialogCheck from './components/DialogCheck/index.vue'
import { hasPermission } from '@/utils'
import { useAppStore } from '@/store/modules/app'

defineOptions({
  name: 'InventoryManagement'
})

const { push } = useRouter()
const { t } = useI18n()
const appStore = useAppStore()

// 移动端检测
const isMobile = computed(() => appStore.getMobile)

const ids = ref<string[]>([])

const DialogImportRef = ref<InstanceType<typeof DialogImport>>()
const DialogAllotRef = ref<InstanceType<typeof DialogAllot>>()
const searchRef = ref<InstanceType<typeof Search>>()
const searchParams = ref({})
const dialogVisible = ref(false)
const currentRow = ref<any>(null)

const setSearchParams = (params: any) => {
  currentPage.value = 1
  searchParams.value = params
  getList()
}

const warehouseList = ref([])
const is_futuresList = ref([])
const source_tableList = ref([])
const allowZeroList = ref([])
const is_saleList = ref([])
const saleLoading = ref<boolean>(false)
const unsaleLoading = ref<boolean>(false)
const allotLoading = ref<boolean>(false)
const multipleSelection = ref<any[]>([])

const getSelectList = async () => {
  const res = await getSecondWarehouseListApi({ disabled: false })
  warehouseList.value = res.data.list
  const resp = await getEnumListApi({})
  is_futuresList.value = resp.data.is_futures
  source_tableList.value = resp.data.source_table
  allowZeroList.value = resp.data.allow_zero_stock_sale
  is_saleList.value = resp.data.is_sale
}
getSelectList()

// 根据接口枚举匹配出中文名称
const useEnumeratePicker = (
  enumList: any[],
  field: string | number,
  key?: string,
  value?: string
) => {
  if (!enumList) return
  const matchItem =
    enumList.find((item: Record<string, any>) => item[value ?? 'value'] === field) || {}
  return matchItem[key ?? 'label'] || ''
}

// 获取状态标签类型
const getStatusTagType = (isSale: number) => {
  return isSale === 1 ? 'success' : 'danger'
}

const handleChangeSale = (row: Record<string, any>) => {
  ElMessageBox.confirm(
    `是否确认${row.is_sale === 1 ? '开启' : '关闭'}可售？`,
    t('purchase.logistics.tips'),
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      try {
        const resp = await setSaleStatusApi({ ids: [row.id], is_sale: row.is_sale })
        if (resp.code === 0) {
          ElMessage.success('状态流转成功')
          await getList()
        }
      } catch (e) {
        await getList()
      }
    })
    .catch(() => {
      row.is_sale = row.is_sale === 1 ? 0 : 1
    })
}
const handleChangeAllowZeroStockSale = (row: Record<string, any>) => {
  ElMessageBox.confirm(
    `是否确认${row.allow_zero_stock_sale === 1 ? '开启' : '关闭'}零库存预售？`,
    t('purchase.logistics.tips'),
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      try {
        const resp = await setAllowZeroStockSaleApi({
          ids: [row.id],
          allow_zero_stock_sale: row.allow_zero_stock_sale
        })
        if (resp.code === 0) {
          ElMessage.success('状态流转成功')
          await getList()
        }
      } catch (e) {
        await getList()
      }
    })
    .catch(() => {
      row.allow_zero_stock_sale = row.allow_zero_stock_sale === 1 ? 0 : 1
    })
}
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

// 移动端卡片选择处理
const handleMobileSelectionChange = (checked: any, item: any) => {
  if (checked) {
    // 添加到选择列表
    if (!multipleSelection.value.find((selected) => selected.id === item.id)) {
      multipleSelection.value.push(item)
    }
  } else {
    // 从选择列表移除
    const index = multipleSelection.value.findIndex((selected) => selected.id === item.id)
    if (index > -1) {
      multipleSelection.value.splice(index, 1)
    }
  }
}

const saleBulk = (index: number) => {
  const saleStatus = multipleSelection.value.every(
    (item: Record<string, any>) => item.is_sale !== index
  )

  if (!saleStatus)
    return ElMessage.warning(
      `当前选中的状态中包含${index === 1 ? '可售' : '不可售'},请取消勾选此类状态项再批量操作`
    )
  ElMessageBox.confirm(
    `是否确认批量${index === 1 ? '开启' : '关闭'}可售？`,
    t('purchase.logistics.tips'),
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      await setSaleStatusApi({
        ids: multipleSelection.value.map((item: Record<string, any>) => item.id),
        is_sale: index
      })
      ElMessage.success('状态流转成功')
      await getList()
    })
    .catch(() => {})
}
const { tableRegister, tableState, tableMethods } = useTable({
  immediate: true,
  currentPageSize: 20,
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getListApi({
      pageIndex: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams),
      ...unref(sortParams)
    })
    return {
      list: res.data.list,
      total: res.data.total
    }
  },
  fetchDelApi: async () => {
    const res = await delListApi(unref(ids))
    return !!res
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

useEventBus({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      currentPage.value = 1
    }
    getList()
  }
})
useEventBus({
  name: 'getInventoryList',
  callback: (type: string) => {
    if (type === 'add') {
      currentPage.value = 1
    }
    getList()
  }
})

const action = (row: CurdData, type: string) => {
  push(`/warehouse/inventory-management/${type}?id=${row.id}`)
}
const handleJumpToEdit = (row: CurdData, type: string) => {
  push({
    path: `/warehouse/inventory-management/${type}`,
    query: {
      id: row.id,
      wid: row.wid
    }
  })
}
const handleJumpToConversion = (row: CurdData) => {
  push({
    path: `/warehouse/inventory-management/conversion`,
    query: {
      id: row.id
    }
  })
}
const handleJumpToAllot = (row: CurdData) => {
  if (row.transfer_num === 0) {
    ElMessage.warning('当前商品不可调拨')
    return
  }
  nextTick(() => {
    dialogVisible.value = true
    currentRow.value = row
  })
}
const DialogCheckRef = ref<InstanceType<typeof DialogCheck>>()
// 打开校对弹窗
const handleOpenCheckDialog = (row: any, type: number) => {
  if (type === 1) {
    DialogCheckRef.value?.open(row, type)
  } else {
    push({
      path: `/warehouse/inventory-management/checking`,
      query: {
        id: row.id
      }
    })
  }
}
const actionButtonsTemplate: ActionButtonsTemplate = {
  length: 5,
  template: (data: any) => {
    return (
      <>
        <BaseButton size="small" onClick={() => handleJumpToEdit(data.row, 'edit')}>
          编辑
        </BaseButton>
        {data.row.is_futures !== 0 && data.row.convertible_qty > 0 && (
          <BaseButton type="primary" size="small" onClick={() => handleJumpToConversion(data.row)}>
            {t('inventory.conversion.title')}
          </BaseButton>
        )}
        {data.row.transfer_num !== 0 && (
          <BaseButton type="primary" size="small" onClick={() => handleJumpToAllot(data.row)}>
            调拨
          </BaseButton>
        )}
        <BaseButton size="small" type="success" onClick={() => action(data.row, 'detail')}>
          {t('action.detail')}
        </BaseButton>
        {data.row.available_qty > 0 &&
          data.row.available_qty >= data.row.lock_qty &&
          data.row.is_show_check_review_btn === 0 &&
          hasPermission(['InventoryManagementCheck']) && (
            <BaseButton
              type="warning"
              size="small"
              onClick={() => handleOpenCheckDialog(data.row, 1)}
            >
              校对
            </BaseButton>
          )}
        {data.row.is_show_check_review_btn === 1 &&
          hasPermission(['InventoryManagementCheckReview']) && (
            <BaseButton
              type="warning"
              size="small"
              onClick={() => handleOpenCheckDialog(data.row, 2)}
            >
              校对审核
            </BaseButton>
          )}
      </>
    )
  }
}
const { crudSchemas } = useSchema({
  actionButtonsTemplate,
  warehouseList,
  is_futuresList,
  source_tableList,
  handleChangeSale,
  handleChangeAllowZeroStockSale,
  allowZeroOptions: allowZeroList,
  is_saleList: is_saleList
})
const { allSchemas } = useCrudSchemas(crudSchemas)

const handleImport = () => {
  nextTick(() => {
    DialogImportRef!.value!.dialogVisible = true
  })
}

const handleExport = () => {
  nextTick(async () => {
    const { currentPage, pageSize } = tableState
    const params = await searchRef.value!.filterModel()
    await exportFileApi(
      {
        pageIndex: unref(currentPage),
        pageSize: unref(pageSize),
        ...unref(params)
      },
      `库存管理_${dayjs().format('YYYY.MM.DD')}.xlsx`
    )
  })
}

const handleBulkAllot = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择要调拨的商品')
    return
  }

  // 检查是否所有选中项的wid都相同
  const firstWid = multipleSelection.value[0].wid
  const isSameWarehouse = multipleSelection.value.every((item) => item.wid === firstWid)

  if (!isSameWarehouse) {
    ElMessage.warning('调拨必须为同一仓库')
    return
  }

  // 检查是否所有选中项都有可调拨数量
  const hasTransferableItems = multipleSelection.value.every((item) => item.transfer_num > 0)
  if (!hasTransferableItems) {
    ElMessage.warning('选中的商品中有不可调拨的商品')
    return
  }

  nextTick(() => {
    dialogVisible.value = true
    currentRow.value = {
      ...multipleSelection.value[0],
      is_bulk: true,
      selected_items: multipleSelection.value
    }
  })
}

// 处理排序变化
const sortParams = ref<any>({})
const classParams = ref<any>({})
const handleSortChange = (sort: any) => {
  console.log('sort', sort)
  // sort对象结构: { prop: '排序字段', order: '排序方向(ascending/descending/null)' }

  const { column, prop, order } = sort
  if (!prop) return // 无排序字段时不处理
  // 转换排序方向（统一为服务端格式：asc/desc）
  const sortDirection = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : null
  classParams.value[prop] = column.id
  if (sortDirection) {
    // 新增/更新排序条件
    sortParams.value[prop] = sortDirection
  } else {
    // 移除排序条件（当点击取消排序时）
    delete sortParams.value[prop]
  }
  console.log('sortParams', sortParams.value)
  // 关键：更新表格列头的排序状态样式
  updateSortIcons()
  // 重置页码为1，因为排序后数据会变化
  currentPage.value = 1
  // 记录排序信息
  // this.sortField = sort.prop;
  // this.sortOrder = sort.order === 'ascending' ? 'asc' :
  //                 sort.order === 'descending' ? 'desc' : '';

  // 调用接口获取排序后的数据
  getList()
}

// 更新排序图标显示状态
const updateSortIcons = () => {
  // 等待 DOM 更新后执行
  nextTick(() => {
    // 清除所有列的排序图标状态
    document.querySelectorAll('.el-table__header .is-sortable').forEach((caret) => {
      caret.classList.remove('ascending', 'descending')
    })

    // 为有排序的列添加对应样式
    Object.entries(sortParams.value).forEach(([field, direction]) => {
      console.log('field', field)
      console.log('direction', direction)
      const th = document.querySelector(`.el-table__header th.${classParams.value[field]}`)
      console.log('th', `.el-table__header th.${classParams.value[field]}`, th)
      if (th) {
        let classActive = direction + 'ending'
        th.classList.add(classActive as string)
        // const caret = th.querySelector('.sort-caret');
        // console.log('caret', caret)
        // if (caret) {
        //   caret.classList.add(direction as string, 'active');
        // }
      }
    })
  })
}
</script>

<template>
  <ContentWrap class="mobile-container">
    <div :class="isMobile ? 'mobile-search-wrap' : ''">
      <Search
        :schema="allSchemas.searchSchema"
        ref="searchRef"
        @search="setSearchParams"
        @reset="setSearchParams"
        :class="isMobile ? 'mobile-search' : ''"
      />
    </div>

    <div :class="isMobile ? 'mobile-button-group' : 'flex flex-items-center my-20px'">
      <BaseButton
        :loading="saleLoading"
        :disabled="!multipleSelection.length"
        type="primary"
        @click="saleBulk(1)"
      >
        批量可售
      </BaseButton>
      <BaseButton
        :loading="unsaleLoading"
        :disabled="!multipleSelection.length"
        type="danger"
        @click="saleBulk(0)"
      >
        批量不可售
      </BaseButton>
      <BaseButton
        v-hasPermi="['InventoryManagementCheckAlloc']"
        :loading="allotLoading"
        :disabled="!multipleSelection.length"
        type="primary"
        @click="handleBulkAllot"
      >
        批量调拨
      </BaseButton>
      <BaseButton type="primary" @click="handleImport">导入</BaseButton>
      <BaseButton type="primary" @click="handleExport">{{ t('action.exportFile') }}</BaseButton>
    </div>

    <!-- 移动端卡片视图 -->
    <div v-if="isMobile" class="mobile-card">
      <el-card v-for="item in dataList" :key="item.id" class="inventory-card">
        <template #header>
          <div class="card-header">
            <el-link :underline="false" type="primary" @click="action(item, 'detail')">
              {{ item.product_name || item.name || '-' }}
            </el-link>
            <div class="header-actions">
              <el-tag :type="getStatusTagType(item.is_sale)" size="small">
                {{ item.is_sale === 1 ? '可售' : '不可售' }}
              </el-tag>
              <el-checkbox
                :model-value="multipleSelection.some((selected) => selected.id === item.id)"
                @change="(checked) => handleMobileSelectionChange(checked, item)"
              >
                选择
              </el-checkbox>
            </div>
          </div>
        </template>

        <div class="card-content">
          <div class="info-row">
            <span class="label">{{ t('inventory.warehouse') }}:</span>
            <span class="value">{{ item.warehouse_value || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.hashRate') }}:</span>
            <span class="value">{{ item.hashrate || item.hashRate || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.sku') }}:</span>
            <span class="value">{{ item.sku || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.is_futures') }}:</span>
            <span class="value">{{ item.is_futures_value || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.source_table') }}:</span>
            <span class="value">{{
              useEnumeratePicker(source_tableList, item.source_table) || '-'
            }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.arrival_date') }}:</span>
            <span class="value">{{ item.arrival_date || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.real_arrival_date') }}:</span>
            <span class="value">{{ item.real_arrival_date || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.inbound_batch') }}:</span>
            <span class="value">{{ item.inbound_batch || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.last_audit_date') }}:</span>
            <span class="value">{{ item.last_audit_date || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.initial_qty') }}:</span>
            <span class="value">{{ item.initial_qty || '0' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.available_qty') }}:</span>
            <span class="value">{{ item.available_qty || '0' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.convertible_qty') }}:</span>
            <span class="value">{{ item.convertible_qty || '0' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.lock_qty') }}:</span>
            <span class="value">{{ item.lock_qty || '0' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('purchase.total_quantity_actual_available') }}:</span>
            <span class="value">{{ item.actual_available_qty || '0' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.currency') }}:</span>
            <span class="value">{{ item.currency || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.price') }}:</span>
            <span class="value">{{ item.price || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.first_leg_logistics_fee') }}:</span>
            <span class="value">{{ item.first_leg_logistics_fee || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">零库存预售:</span>
            <span class="value">
              <el-tag :type="item.allow_zero_stock_sale === 1 ? 'success' : 'danger'" size="small">
                {{ item.allow_zero_stock_sale === 1 ? '允许' : '不允许' }}
              </el-tag>
            </span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.creator') }}:</span>
            <span class="value">{{ item.creator_value || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.create_time') }}:</span>
            <span class="value">{{ item.create_time || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.updater') }}:</span>
            <span class="value">{{ item.updater_value || '-' }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('inventory.update_time') }}:</span>
            <span class="value">{{ item.update_time || '-' }}</span>
          </div>
          <div class="info-row">
            <span class="label">备注:</span>
            <span class="value">{{ item.notes || '-' }}</span>
          </div>
        </div>

        <!-- 移动端操作按钮 -->
        <div class="card-actions">
          <el-button
            type="primary"
            size="small"
            @click="handleJumpToEdit(item, 'edit')"
            class="action-btn"
          >
            编辑
          </el-button>
          <el-button
            v-if="item.is_futures !== 0 && item.convertible_qty > 0"
            type="primary"
            size="small"
            @click="handleJumpToConversion(item)"
            class="action-btn"
          >
            {{ t('inventory.conversion.title') }}
          </el-button>
          <el-button
            v-if="item.transfer_num !== 0"
            type="primary"
            size="small"
            @click="handleJumpToAllot(item)"
            class="action-btn"
          >
            调拨
          </el-button>
          <el-button type="success" size="small" @click="action(item, 'detail')" class="action-btn">
            {{ t('action.detail') }}
          </el-button>
          <el-button
            v-if="
              item.available_qty > 0 &&
              item.available_qty >= item.lock_qty &&
              item.is_show_check_review_btn === 0 &&
              hasPermission(['InventoryManagementCheck'])
            "
            type="warning"
            size="small"
            @click="handleOpenCheckDialog(item, 1)"
            class="action-btn"
          >
            校对
          </el-button>
          <el-button
            v-if="
              item.is_show_check_review_btn === 1 &&
              hasPermission(['InventoryManagementCheckReview'])
            "
            type="warning"
            size="small"
            @click="handleOpenCheckDialog(item, 2)"
            class="action-btn"
          >
            校对审核
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 桌面端表格视图 -->
    <Table
      v-if="!isMobile"
      showAction
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    />

    <!-- 移动端分页 -->
    <Pagination
      v-if="isMobile"
      class="mobile-pagination"
      :total="total"
      v-model:page="currentPage"
      v-model:limit="pageSize"
      @pagination="getList"
    />

    <!--    导入弹框-->
    <DialogImport ref="DialogImportRef" @refresh="getList" />
    <!--校对-->
    <DialogCheck ref="DialogCheckRef" @refresh="getList" />
    <!--    调拨弹框-->
    <DialogAllot
      ref="DialogAllotRef"
      v-model:dialogVisible="dialogVisible"
      :row="currentRow"
      @refresh="getList"
    />
  </ContentWrap>
</template>

<style lang="less" scoped>
:deep(.el-table--default .el-table__cell) {
  padding: 2px 0 !important;
}

:deep(.el-table--default .cell) {
  padding: 0 4px;
}

// 移动端容器样式
.mobile-container {
  @media (width <= 768px) {
    padding: 16px 12px;
  }
}

// 移动端搜索框样式
.mobile-search-wrap {
  @media (width <= 968px) {
    width: calc(100% + 20px);
    margin-left: -20px;
  }
}

.mobile-search {
  @media (width <= 968px) {
    width: calc(100% + 20px);
    margin-bottom: 16px;
    margin-left: -20px;

    :deep(.el-form-item) {
      margin-bottom: 12px;

      .el-form-item__label {
        width: 80px !important;
        text-align: left;
      }

      .el-form-item__content {
        margin-left: 80px !important;

        // 日期选择器宽度调整
        .el-date-editor {
          width: 100% !important;
          max-width: calc(100vw - 120px) !important;
        }

        // 确保其他表单控件也不超出
        .el-input,
        .el-select {
          width: 100% !important;
          max-width: calc(100vw - 120px) !important;
        }
      }
    }
  }
}

// 移动端按钮组样式
.mobile-button-group {
  @media (width <= 768px) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;

    .el-button {
      flex: 1;
      min-width: calc(50% - 4px);
      margin: 0;
    }
  }
}

// 移动端卡片样式
.mobile-card {
  @media (width <= 768px) {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .inventory-card {
      border-radius: 8px;
      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;

        .el-link {
          flex: 1;
          font-size: 14px;
          font-weight: 600;
          line-height: 1.4;
          word-break: break-all;
        }

        .header-actions {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 8px;
          flex-shrink: 0;
        }
      }

      .card-content {
        padding: 0;

        .info-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 8px;
          line-height: 1.4;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            min-width: 90px;
            margin-right: 8px;
            font-weight: 500;
            color: #666;
            flex-shrink: 0;
          }

          .value {
            color: #333;
            text-align: right;
            word-break: break-all;
            flex: 1;

            .el-tag {
              font-size: 12px;
            }
          }
        }
      }

      .card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 12px;
        margin-top: 12px;
        border-top: 1px solid #f0f0f0;

        .action-btn {
          height: 28px;
          min-width: 60px;
          padding: 0 8px;
          font-size: 11px;
          border-radius: 3px;
          flex: 0 0 auto;
        }
      }
    }
  }
}

// 移动端分页样式
.mobile-pagination {
  @media (width <= 768px) {
    margin-top: 16px;
    text-align: center;

    :deep(.el-pagination) {
      justify-content: center;

      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}
</style>
